<template>
  <view class="profile-container">
		<view class="avatar-box">
			<view class="img-box">
				<image :src="imageSrc" style="width: 100%;height: 100%;"  ></image>
			</view>
			<view class="edit-icon" @click="editAvatar"></view>
		</view>
			
		<view class="content-section">
			<view class="group-type">
				<view class="contnet-item" @click="editNcikname" >
					<view class="item-title">Nick name</view>
					<view class="item-value">{{name}}</view>
					<view class="arrow"></view>
				</view>
				<view class="contnet-item" @click="editEMail" >
					<view class="item-title">E-Mail</view>
					<view class="item-value">lidonghai@email.com</view>
					<view class="arrow"></view>
				</view>
			</view>
		</view>

		<uni-popup ref="avatarPopup" type="bottom" border-radius="10px 10px 0 0"  background-color="#fff">
			<view class="avatar-popup">
				<view class="popup-title">Modify avatar</view>
				<view class="popup-opt-list">
					<view class="opt-item" @click="useCamera" >
						<view class="opt-icon">
							<image src="../../static/images/icons/camera.png"></image>
						</view>
						<view class="opt-name">Camera</view>
					</view>
					<view class="opt-item" @click="useAlbum">
						<view class="opt-icon">
							<image src="../../static/images/icons/album2.png"></image>
						</view>
						<view class="opt-name">Choose from Album</view>
					</view>
				</view>
			</view>
		</uni-popup>
		
		<uni-popup ref="nicknamePopup" type="dialog">
			<uni-popup-dialog ref="nicknameInput" mode="input" title="Nick name" v-model="nickNameValue"
				placeholder="Nick name" @confirm="dialogInputConfirm"></uni-popup-dialog>
		</uni-popup>
		
		<uni-popup ref="emailPopup" type="dialog">
			<uni-popup-dialog ref="emailInput" mode="input" title="E-Mail" v-model="emailValue"
				placeholder="E-Mail" @confirm="dialogInputConfirm"></uni-popup-dialog>
		</uni-popup>
		
	</view>
 

</template>
.
<script setup>
  import storage from '@/utils/storage'
  import store from '@/store'
  import { ref } from "vue";
  import config from '@/config.js'
  const name=store.state.user.name;
  const version= config.appInfo.version;
  const avatar=ref(store.state.user.avatar);
  const windowHeight=ref(uni.getSystemInfoSync().windowHeight - 50);
	const avatarPopup = ref(null);
	const nicknamePopup = ref(null);
	const emailPopup = ref(null);
	const nickNameValue = ref(name);
	const emailValue = ref('lidonghai@email.com');
	const imageSrc = ref('../../static/images/avatar.png');
	
	
	//修改头像
	const editAvatar = ()=>{
		avatarPopup.value.open()
	}
  
	//选择相机
	const useCamera = ()=>{
		uni.chooseImage({
			count: 1, //默认9
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ['camera'], //从相册选择
			success: function (res) {
				console.log(JSON.stringify(res.tempFilePaths));
			}
		});
	}
	//选择相册
	const useAlbum = ()=>{
		uni.chooseImage({
			count: 1, //默认9
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ['album'], //从相册选择
			success: function (res) {
				// console.log(JSON.stringify(res.tempFilePaths));
				avatarPopup.value.close()
				imageSrc.value = res.tempFilePaths[0]
				uni.navigateTo({
					url:'/pages/mine/cropper?url='+imageSrc.value
				})
			}
		});
	}
  
	//修改昵称
	const editNcikname = ()=>{
		nicknamePopup.value.open();
	}
	
	
	//修改邮箱
	const editEMail = ()=>{
		emailPopup.value.open();
	}
	
</script>

<style lang="scss" scoped>
	.profile-container{
		overflow: hidden;
		position: relative;
		.avatar-box{
			width: 206rpx;
			height: 206rpx;
			margin: 55rpx auto;
			position: relative;
			.img-box{
				width: 100%;
				height: 100%;
				overflow: hidden;
				border-radius:30rpx;
				border: 6rpx solid #DA2407;
				box-shadow: 0 15.19rpx 46.73rpx 0 #4949494f;
			}
			.edit-icon{
				position: absolute;
				width: 58rpx;
				height: 58rpx;
				right: -6rpx;
				bottom: -6rpx;
				background-color: #DA2407;
				border-radius: 10rpx;
				background-image: url('../../static/images/icons/edit.png');
				background-size: contain;
			}
		}
		
		.content-section{
			margin-top: 90rpx;
			padding: 0 30rpx;
			.group-type{
				display: flex;
				flex-direction: column;
				border-radius: 20rpx;
				background-color: #fff;
				margin-top: 35rpx;
				overflow: hidden;
				.contnet-item{
					flex: 0 0 110rpx;
				}
			}
			.contnet-item{
				background-color: #fff;
				flex: 1;
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				justify-content: flex-start;
				padding: 20rpx;
				.item-icon{
					width: 46rpx;
					height: 46rpx;
					background-size: 100% 100%;
					&.icon-device{
						background-image: url('../../static/images/icons/device.png');
					}
					&.icon-album{
						background-image: url('../../static/images/icons/album.png');
					}
				}
				.item-title{
					flex: 1;
					font-weight: 600;
					font-size: 28.04rpx;
					color: #222222;
					margin-left: 8rpx;
					text-align: left;
				}
				.item-value{
					flex: 1;
					font-weight: 400;
					font-size: 25rpx;
					color: #666;
					margin-left: 8rpx;
					text-align: right;
				}
				.arrow{
					flex: 0 0 44.39rpx;
					height: 44.39rpx;
					background-color: #F7F7F7;
					border-radius: 15.77rpx;
					background-image: url('../../static/images/icons/arrow-down.png');
					background-size: 100% 100%;
					transform: rotate(-90deg);
				}
			}
		}
	
		.avatar-popup{
			width: 100%;
			height: 458rpx;
			background-color: #fff;
			border-radius:10px 10px 0 0;
			.popup-title{
				padding: 10px 0;
				text-align: center;
				color: #222222;
				height: 80rpx;
				font-size: 30rpx;
				font-weight: 600;
			}
			.popup-opt-list{
				height: 366rpx;
				width: 100%;
				.opt-item{
					border-top: 1rpx solid #F2F2F2;
					height: 180rpx;
					display: flex;
					flex-wrap: nowrap;
					align-items: center;
					justify-content: center;
					.opt-icon{
						width: 58rpx;
						height: 58rpx;
						image{
							width: 100%;
							height: 100%;
						}
					}
					.opt-name{
						color: #37343B;
						font-size: 28rpx;
					}
				}
			}
		}
	

	}
</style>
